

const TerserPlugin = require("terser-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const {resolve,join} = require('path'); // node内置核心模块，用来设置路径。

module.exports = {
  entry: './src/js/index.js',   // 入口文件
  output: {                     // 输出配置
    filename: 'js/main.js',      // 输出文件名
    path: resolve(__dirname, 'dist'),   // 项目所有打包文件存放的文件夹，一般在 dist 文件夹
  },
  module: {
    rules: [

        // babel
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ['@babel/preset-env']
              }
            }
        },

        // ts
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        },

        // css
        {
          test: /\.css$/,
          use: [ 
            'style-loader',
            'css-loader',
          ]
        },

        // scss
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        },    
        
        // file
        {
          loader: 'file-loader',
          test: /\.(woff|woff2|eot|ttf|otf)$/,
        },

        // url
        {
          test: /\.(png|jpg|gif|svg)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                esModule: false, // 这里设置为false
              },
            },
          ]
        },

        // html
        {
          test: /\.(html)$/,
          use: {
            loader: 'html-loader'
          }
        },

    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  
  devServer: {
    contentBase: join(__dirname, "dist"),
    port: 3000,
    compress: false,
    progress: true,
    hot: true,  //开启热模替换功能
    open: true  //自动打开浏览器
  },
  devtool: '#cheap-module-eval-source-map',
  watchOptions: {
    aggregateTimeout: 500,
    poll: 1000,
    ignored: /node_modules/
  },
  mode: 'development'   // 生产环境(二选一)
};
